<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="height:3.7rem">
      <van-swipe-item v-for="(banner,index) in bannergallery" :key="index">
        <img :src="banner.img_url" style="width:100%;height: 3.7rem;">
      </van-swipe-item>
    </van-swipe>
    <Tips />
    <div class="brandname">
      <!--商品名称-->
      <div class="spanlist">
        <span class="span1">{{info.name}}</span>
        <span class="span2">{{info.goods_brief}}</span>
        <span class="span3">￥{{info.retail_price.toFixed(2)}}元</span>
      </div>
      <!--弹出层-->
      <div class="Ejectionlayer">
        <van-cell is-link @click="showPopup">展示弹出层</van-cell>
        <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
          <div class="Popuplayercontent">
            <img :src="info.list_pic_url" style="width:30%">
            <div class="Priceandstatus">
              <span class="span4">￥{{info.retail_price}}</span>
              <span class="span5">剩余{{info.goods_number}}{{info.goods_unit}}</span>
              <span class="span6">请选择</span>
            </div>
          </div>
          <div class="Stepper">
            <span>购买数量</span>
            <van-stepper v-model="value" />
          </div>

        </van-popup>
      </div>
      <!--商品参数-->
      <div class="specification">
        <span style="font-size:0.18rem;margin-left:5%">商品参数</span>
        <div class="attributelist">
          <div class="attribute" v-for="(ttri,index) in attribute" :key="index">
            <span class="span7">{{ttri.name}}</span>
            <span class="span8">{{ttri.value}}</span>
          </div>
        </div>
      </div>
      <!--商品图片信息-->
      <div class="goods_desc" v-html='goods_desc'></div>
      <!--常见问题-->
      <div class="common">
        <div class="title">
          <span>常见问题</span>
        </div>
        <ul class="ullist" v-for="(iss,index) in issue" :key="index">
          <li>{{iss.question}} </li>
          <span>{{iss.answer}}</span>
        </ul>
      </div>
      <!--相关产品推荐-->
      <Commoditycomponents :newGoodsList="RelatedproductsList" :name="name" />
    </div>
    <van-goods-action class="action" style="z-index:10000">
      <van-goods-action-icon :icon="this.icon=='1'?'star-o':'star'" :text="text" color="#ff5000" @click="getcollect" />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="goodsCount" />
      <van-goods-action-button type="warning" text="加入购物车" @click="getaddcart" />
      <van-goods-action-button type="danger" text="立即购买" @click="getImmediate " />
    </van-goods-action>
  </div>
</template>

<script>
import { Toast } from 'vant'
import Tips from '@/components/Tips.vue'
import Commoditycomponents from '@/components/Commoditycomponents.vue'
import { mapState } from 'vuex'
export default {
  name: 'productDetail',
  data() {
    return {
      show: false,
      value: 1,
      //收藏与未收藏的图标文字
      icon: 1,
      text: '未收藏',
      name: '相关产品',
      //购物车产品数量
      goodsCount: '',
      //产品id
      productId: ''
    }
  },
  components: {
    Tips,
    Commoditycomponents
  },
  computed: {
    ...mapState({
      //轮播图的数据
      bannergallery: state => state.login.BranddetailsList.gallery,
      //商品名称和弹出层的内容
      info: state => state.login.BranddetailsList.info,
      //商品参数数据
      attribute: state => state.login.BranddetailsList.attribute,
      //商品信息（返回html标签）
      goods_desc: state => state.login.BranddetailsList.info.goods_desc,
      //常见问题
      issue: state => state.login.BranddetailsList.issue,
      //相关产品推荐
      RelatedproductsList: state => state.login.RelatedproductsList
    })
  },
  mounted() {
    this.getBranddetailsList()
    this.getRelatedproductsList()
    this.getProductquantityList()
  },
  methods: {
    //品牌的详情获取
    getBranddetailsList() {
      this.$store.dispatch('getBranddetailsList', this.$route.params.id)
    },
    //相关产品
    getRelatedproductsList() {
      this.$store.dispatch('getRelatedproductsList', this.$route.params.id)
    },
    //获取购物车产品数量
    getProductquantityList() {
      this.$store.dispatch('getProductquantityList')
      setTimeout(() => {
        this.goodsCount = this.$store.state.login.cartTotal.goodsCount
        this.productId = this.$store.state.login.BranddetailsList.productList
      }, 500)
    },
    showPopup() {
      this.show = true
    },
    //收藏与未收藏的按钮
    getcollect() {
      if (this.text === '未收藏') {
        this.icon = 2
        this.text = '已收藏'
      } else {
        this.icon = 1
        this.text = '未收藏'
      }
    },
    //点击加入购物车，弹出层展开,如果已展开，则加入购物车
    getaddcart() {
      if (this.show == false) {
        this.show = true
      } else {
        this.$store.dispatch('getAddtocartList', { goodsId: this.$route.params.id, productId: this.productId[0].id, number: this.value })
        setTimeout(() => {
          if (this.$store.state.login.errno.errno == 0) {
            Toast('添加成功！')
            //更新购物栏的数量
            this.goodsCount = this.$store.state.login.errno.data.cartTotal.checkedGoodsCount
            setTimeout(() => {
              this.$router.push('/cart')
            }, 1000)
          } else if (this.$store.state.login.errno.errno == 400) {
            Toast('库存不足')
          } else {
            Toast('未知错误')
          }
        }, 500)
      }
    },
    //点击立即购买
    getImmediate() {
      Toast('该功能未开发')
    }
  }
}
</script>

<style lang="less" scoped>
.brandname {
  height: 100%;
  padding-bottom: 13%;
  .spanlist {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-bottom: 0.02rem solid #e5e5e5;
    .span1 {
      display: flex;
      justify-content: center;
      font-size: 0.2rem;
      margin-bottom: 5%;
      margin-top: 5%;
    }
    .span2 {
      display: flex;
      justify-content: center;
      font-size: 0.14rem;
      margin-bottom: 5%;
    }
    .span3 {
      display: flex;
      justify-content: center;
      color: #880000;
      margin-bottom: 2%;
    }
  }
  .Ejectionlayer {
    .Popuplayercontent {
      display: flex;
      border-bottom: 1px solid #e5e5e5;
      img {
        margin-bottom: 2%;
      }
      .Priceandstatus {
        display: flex;
        flex-direction: column;
        .span4 {
          margin-bottom: 6%;
          color: red;
          font-size: 0.2rem;
          margin-top: 60%;
        }
        .span5 {
          margin-bottom: 6%;
          font-size: 0.1rem;
          color: #918f8f;
        }
        .span6 {
          font-size: 0.1rem;
          color: #868585;
        }
      }
    }
    .Stepper {
      display: flex;
      justify-content: space-between;
      padding: 4% 3%;
    }
  }
  .specification {
    background-color: #fff;
    .attributelist {
      display: flex;
      flex-direction: column;
      .attribute {
        background-color: #e5e5e5;

        margin: 5% 5% 0% 5%;
        width: 86%;
        border-radius: 0.05rem;
        display: flex;
        align-items: center;
        padding: 3% 2%;
        .span7 {
          flex: 3;
          margin-right: 3%;
          display: flex;
          justify-content: right;
        }
        .span8 {
          flex: 7;
          font-size: 0.18rem;
          display: flex;
          white-space: nowrap; /*不让文本换行*/
          overflow: hidden; /*超出的部分显示...*/
        }
      }
    }
  }
  /deep/.goods_desc {
    img {
      display: block;
      width: 100%;
      margin-top: -4%;
    }
  }
  .common {
    margin-top: -5%;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: center;
    }
    .ullist {
      margin-left: 5%;
      margin-top: 4%;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      li {
      }
      span {
        font-size: 0.12rem;
      }
    }
  }
}
</style>
<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>